import { memo } from "react";
import { NavLink } from "react-router-dom";
import { DiscoverWrapped , TopMenu } from "./style";
import { discoverMenu } from "common/local-data";
import { renderRoutes } from "react-router-config";

export default memo ( function HDiscover ( props ) {
  // 从props中取到route对象，再从中取出子路由数组routes
  const { route } = props;
  return (
    <DiscoverWrapped>
      <div className={"header"}>
        <div className="top">
          <TopMenu>
            { discoverMenu.map ( ( item ) => {
              return (
                <NavLink key={ item.title } exact to={ `/discover${ item.link }` }>
                <span>
                  { item.title }
                  { item.title === "歌单" ? <i className={ "top-icon" }/> : "" }
                </span>
                </NavLink>
              );
            } ) }
          </TopMenu>
        </div>
      </div>
      { renderRoutes ( route.routes ) }
    </DiscoverWrapped>
  );
} );
